<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$theme['title']}-选择课程</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/reset.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/style.css?v=1">
    <script src="{TEST_STATIC_PATH}new_beilai/js/screen.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/jquery.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/swiper.min.js"></script>
    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
    <style>
        .lessonFooter{
            height: 1rem;
            padding-top: 0;
        }
        .lessonFooter a.nextStep{
            line-height: .7rem;
            margin-top: .14rem;
        background: linear-gradient(90deg, {$config['formcolorhead']} 15.44%, {$config['formcolortop']} 90.59%);
        }
    </style>
    <style>
        .wrap{
            display: flex;
        }
        .category_container {
            max-width: 1.4rem;
            min-width: 1.4rem;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            padding: .14rem 0;
            background: #f7f7f7;
            position: fixed;
            top: 0;
            min-height: 100%;
        }
        .category_container span{
            line-height: .94rem;
            font-size: .24rem;
            display: inline-block;
            width: 100%;
            max-width: 1.4rem;
            min-width: 1.4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            text-align: center;
            border-bottom: 1px dashed gray;
        background: linear-gradient(90deg,{$edu_colors['lcc_c1']} -5.72%,{$edu_colors['lcc_c2']} 85.87%);
        color:{$edu_colors['lcc_tc']}
        }
        .category_container span.active {
        background: linear-gradient(90deg,{$edu_colors['lcc_c_c1']} -5.72%,{$edu_colors['lcc_c_c2']} 85.87%);
        color:{$edu_colors['lcc_c_tc']}
        }
        .wrap .lessonList{
            background: #f7f7f7;
            padding: unset;
            padding-top: 0.14rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            max-width: 83%;
            position: fixed;
            right: 0;
            top: 0;
            min-height: calc(100% - 1rem);
            z-index: 10;
        }
        .new_hide{
            display: none;
        }
        .lesson-item-top li {
            padding: .32rem .32rem .32rem .8rem;
            width: 4.5rem;
        }
        .lesson-item-top li::after{
            left: .12rem;
            width: .34rem;
            height: .34rem;
        }
        .choseTxt{
            width: 3rem;
        }
        .service{
            background: rgba(0,0,0,0.8);
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: fixed;
            z-index:8;
        }
        .lesson-item-top li.cur:after{
            left: .12rem;
            width: .32rem;
            height: .32rem;
        }
        .right_div{
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            padding: .32rem;
            padding-bottom: 1rem;
            width: 100%;
        }
        .category_container_p{
            position: absolute;
            color: #ffffff;
            right: .06rem;
            top: 0;
            background: #FA600A;
            height: .3rem;
            line-height: .3rem;
            width: .3rem;
            border-radius: .16rem;
            font-size: 10px;
            display: none;
        }
    </style>
</head>
<body class="grayBox">
<div class="wrap">
    <div class="category_container">
        {loop $shangjia_arr $key $row}
        <span class="{if $key==0}active{/if}" data-id="{$row['id']}">{$row['title']}
        <p class="category_container_p ">0</p></span>
        {/loop}
    </div>
    <div class="lessonList" style="max-width: 82%;">
        <ul>
            {loop $shangjia_arr $kk $vv}
            <div class="right_div {if $kk!=0}new_hide{/if}" data-id="{$vv['id']}" >
                {loop $vv['courses'] $key $item}
                <div class="lesson-item">
                    <div class="lesson-item-top">
                        <li data-k="{$key}" data-courseid="{$item['id']}" data-shangjia_id="{$item['shangjia_id']}">
                            <div class="choseImg ">
                                <img src="{$item['top_img']}" style="width: 60px;height: 60px">
                            </div>
                            <div class="choseTxt">
                                <h2>{$item['name']}</h2>
                                <h3>机构：{$item['shangjia_name']}</h3>
                                <p>
                                    已购：{$item['selected_num']}
                                    <span>¥<b>{$item['price']}</b></span>
                                </p>
                            </div>
                        </li>
                    </div>
                    <div class="service" style="display: none;">
                        <div class="choseAdd">
                            <h2>请选择{$school_other_name}<span class="closeAdd"></span></h2>
                            <ul>
                                {loop $item['address'] $address_item}
                                <li>{$address_item}</li>
                                {/loop}
                            </ul>
                            <div class="sureAdd">
                                <a class="confirm">确定</a>
                            </div>
                        </div>
                    </div>


                </div>
                {/loop}
            </div>
            {/loop}
        </ul>
    </div>
    <div class="lessonFooter">
        <!--    <span class="allChose">全选</span>-->
        <a href="javascript:goNext()" class="nextStep" style="color: {$config['formcolorcentertext']}">下一步</a>
        <p>已选<span class="num">0</span>个</p>
    </div>
</div>
<div id="screen"></div>

<!--选择校区-->
<div style="margin-top: 60px"></div>

</body>
<script>
    function getSjItem(data,sj_id){
        let sj = {};
        $.each(data,function (ii,val) {
            if (val.shangjia_id == sj_id){
                sj = val;
                return sj;
            }
        });
        return sj;
    }
    function changesJCourse(sjid){
        let sj_selected_course = $(".lessonList ul .lesson-item-top li.cur");
        let sj_selected_course_length = sj_selected_course.length;
        let tmp_sj_selected_course = 0;
        for (let i = 0;i<sj_selected_course_length;i++){
            if (sj_selected_course.eq(i).data("shangjia_id")==sjid){
                tmp_sj_selected_course+=1;
            }
        }
        //获取左侧商家
        let tmp_sj_container = $(".category_container span");
        let tmp_sj_container_length = tmp_sj_container.length;
        for (let j=0;j<tmp_sj_container_length;j++){

            if (tmp_sj_container.eq(j).data("id")==sjid){
                if (tmp_sj_selected_course>0){
                    $(".category_container span").eq(j).children(".category_container_p").html(tmp_sj_selected_course);
                    $(".category_container span").eq(j).children(".category_container_p").show();
                }else{
                    $(".category_container span").eq(j).children(".category_container_p").hide();
                }
            }
        }
    }
</script>
<script type="text/javascript">
    let course_min_num="{$course_min_num}";
    let course_max_num="{$course_max_num}";
    let show_shangjia_data= '{$show_shangjia_data}';
    show_shangjia_data = JSON.parse(show_shangjia_data);


    $('.lesson-item-top li').click(function(){
        if($(this).hasClass('cur')){
            $(this).removeClass('cur')
        }else{
            $(this).addClass('cur');
        }
        var item_key = $(this).data("k");
        let shangjia_id=$(this).data("shangjia_id");


        let index=$(".lessonList ul .lesson-item-top li").index(this);
        let length=$(".lessonList ul .cur").length;


        //获取当前的商家信息
        let shangjia_item = getSjItem(show_shangjia_data,shangjia_id);
        //判断商家可选课程数
        if (shangjia_item.course_max>0){
            let tmp_shangjia_cheked_num = 0;
            for (let i=0;i<length;i++){
                if (shangjia_id==$(".lessonList ul .lesson-item-top li.cur").eq(i).data("shangjia_id")){
                    tmp_shangjia_cheked_num+=1;
                    if(index == $(".lessonList ul .lesson-item-top li").index($(".lessonList ul .lesson-item-top li.cur").eq(i))) continue;
                    if (tmp_shangjia_cheked_num>=shangjia_item.course_max){
                        let tmp_msg = '当前商家最多选择'+shangjia_item.course_max+'个{$course_other_name}';
                        layer.msg(tmp_msg);
                        $(this).removeClass('cur');
                        return;
                    }
                }
            }
        }
        //判断课程可选总量
        if (length>course_max_num){
            let tmp_msg = '最多选择'+course_max_num+'个{$course_other_name}';
            layer.msg(tmp_msg);
            $(this).removeClass('cur');
            return;
        }

        changesJCourse(shangjia_id);
        $('.lessonFooter .num').html($(".lessonList ul .lesson-item-top li.cur").length);
        if(!$(this).hasClass('cur')) {
            changesJCourse(shangjia_id);
            $('.choseAdd').eq(index).find('.checked').removeClass('checked');
            return;
        }
        if($('.choseAdd').eq(index).find('li').length > 1) {
            $('.choseAdd').eq(index).fadeIn();
            // $('#screen').fadeIn();
            $('.choseAdd').eq(index).parent().fadeIn();
        } else {
            $('.choseAdd').eq(index).find('li').addClass('checked');
        }
        $('.lessonFooter .num').html($(".lessonList ul .lesson-item-top li.cur").length);

    })
    //关闭弹窗
    $('.closeAdd').click(function(){
        if($('.choseAdd').eq($('.closeAdd').index($(this))).find('li.checked').length <=0) {
            $(".lessonList ul .lesson-item-top li").eq($('.closeAdd').index($(this))).removeClass('cur');
            let shangjia_id = $(".lessonList ul .lesson-item-top li").eq($('.closeAdd').index($(this))).data("shangjia_id");
            changesJCourse(shangjia_id);
        }
        // $('#screen').fadeOut();
        $(this).parents('.choseAdd').fadeOut();
        $(this).parents('.service').fadeOut();
    })
    //地区选择
    $('.choseAdd li').click(function(){
        $(this).addClass('checked').siblings().removeClass('checked')
    })
    $('.choseAdd .confirm').click(function () {
        if($('.choseAdd').eq($('.choseAdd .confirm').index($(this))).find('li.checked').length <= 0) {
            $(".lessonList ul .lesson-item-top li").eq($('.choseAdd .confirm').index($(this))).removeClass('cur');
        }
        // $('#screen').fadeOut();
        $(this).parents('.choseAdd').fadeOut();
        $(this).parents('.service').fadeOut();
    })
    //全选
    $('.allChose').click(function(){
        if($(this).hasClass('on')){
            $(this).removeClass('on')
            $('.lessonList li').removeClass('cur')
        }else{
            $(this).addClass('on');
            $('.lessonList li').addClass('cur')
        }
    })
    function goNext() {
        let length = $(".lessonList ul .lesson-item-top li.cur").length;
        if(length < course_min_num) {
            layer.msg(`最少选择${course_min_num}个`);
            return;
        }
        if(length > course_max_num) {
            layer.msg(`最多选择${course_max_num}个`);
            return;
        }
        let arr = [];
        for (let i = 0; i < length; i++) {
            let shangjia_id = $(".lessonList ul .lesson-item-top li.cur").eq(i).data('shangjia_id');
            let courseid = $(".lessonList ul .lesson-item-top li.cur").eq(i).data('courseid');
            let index = $(".lessonList ul .lesson-item-top li").index($(".lessonList ul .lesson-item-top li.cur").eq(i));
            let address = $('.choseAdd').eq(index).find('li.checked').html();
            let top_img = $('.lessonList .lesson-item .choseImg img').eq(index).attr('src');
            let name  = $('.lessonList .lesson-item .choseTxt h2').eq(index).html();
            let shangjia_name = $('.lessonList .lesson-item .choseTxt h3').eq(index).html();
            arr.push({
                shangjia_id, courseid, address, top_img, name, shangjia_name
            })
        }
        let courseStr = JSON.stringify(arr);
        localStorage.setItem('course_address', courseStr);
        let url=`/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'from'=>'mobile','r'=>'education.index.gift','joinid'=>$joinid,'recordid'=>$recordid));}`;
        window.location.href = url;
    }

    // 添加类别
    $('.category_container span').click(function () {
        $(this).siblings('span').removeClass('active');
        const tmp_index = $(this).index();
        if($(this).hasClass('active')) {
            // $(this).removeClass('active')
        }else {
            $('.right_div').siblings().addClass('new_hide');
            $('.right_div').eq(tmp_index).removeClass('new_hide')
            $(this).addClass('active');
        }
    })


</script>

</html>
